<template>
    <div class="page">
        <!-- 头部 -->
        <van-sticky>

            <van-nav-bar title="试卷列表" left-arrow @click-left="onClickLeft" />
        </van-sticky>
        <!-- 加载 -->
        <div class="wrapper" v-if="loading">
            <van-loading color="#1989fa" type="spinner" />
        </div>
        <!-- 表单 -->
        <van-form v-else @submit="onSubmit">
            <!-- 标题 -->
            <h2 class="title">试卷名称：2022年入党考试题</h2>
            <!-- 内容 -->
            <div class="pannel">
                <!-- 遍历单选题 -->
                <h2>单选题</h2>
                <template v-for="(ele, index) in singleQuestion">
                    <div class="card">
                        <!-- 题目序号和题目 -->
                        <h2 class="card-hd">{{ index + 1 }}、{{ ele.title }}</h2>
                        <!-- 验证单选 -->
                        <van-field :rules="[{ validator: validatorDanxuan, message: '请选择合适的选项...' }]"
                            :name="'radio-' + ele.id">
                            <!-- 遍历选项 -->
                            <template #input>
                                <van-radio-group v-model="radioSelect['radio' + ele.id]">
                                    <!-- k获取选项标、e是选项内容 -->
                                    <van-radio v-for="(e, k) in ele.options" class="item" :name="k">{{ k }} {{ e }}
                                    </van-radio>
                                </van-radio-group>
                            </template>
                        </van-field>

                    </div>

                </template>
            </div>
            <!-- 遍历多选题 -->
            <div class="pannel">
                <h2>多选题</h2>
                <template v-for="(ele, index) in multipleQuestion">
                    <div class="card">
                        <!-- 题目序号和题目 -->
                        <h2 class="card-hd">{{ index + 1 }}、{{ele.title}}</h2>
                        <!-- 验证复选 -->
                        <van-field :rules="[{ validator: validatorCheckBox, message: '请选择合适的选项...' }]"
                            :name="'checkbox-' + ele.id">
                            <template #input>
                                <!-- 遍历选项 -->
                                <van-checkbox-group v-model="radioSelect['checkbox' + ele.id]">
                                    <!-- k获取选项标、e是选项内容 -->
                                    <van-checkbox v-for="(e, k) in ele.options" class="item" :name="k">{{ k }} {{ e }}
                                    </van-checkbox>
                                </van-checkbox-group>
                            </template>
                        </van-field>

                    </div>

                </template>
            </div>
            <!-- 遍历判断题 -->
            <div class="pannel">
                <h2>判断题</h2>
                <template v-for="(ele, index) in judgementQuestion">
                    <div class="card">
                        <!-- 题目序号和题目 -->
                        <h2 class="card-hd">{{ index + 1 }}、{{ ele.title }}</h2>
                        <!-- 验证判断 -->
                        <van-field :rules="[{ validator: validatorJudg, message: '请选择合适的选项...' }]"
                            :name="'judg-' + ele.id">
                            <template #input>
                                <!-- 遍历选项 -->
                                <van-radio-group v-model="judgList['judg' + ele.id]">
                                    <van-radio class="item" name="A">对</van-radio>
                                    <van-radio class="item" name="B">错</van-radio>
                                </van-radio-group>
                            </template>
                        </van-field>

                    </div>

                </template>
            </div>
            <!-- 遍历简答题 -->
            <div class="pannel">
                <h2>简答题</h2>
                <template v-for="(ele, index) in answerQuestion">
                    <div class="card">
                        <!-- 题目序号和题目 -->
                        <h2 class="card-hd">{{ index + 1 }}、{{ ele.title }}</h2>
                        <!-- 验证判断 -->
                        <!-- 回答内容 -->
                        <van-field :rules="[{ validator: validatorAnswer, message: '' }]" :name="'answer-' + ele.id"
                            v-model="judgList['answer' + ele.id]" rows="3" autosize type="textarea" maxlength="1000"
                            placeholder="请输入答案" show-word-limit>


                        </van-field>

                    </div>

                </template>
            </div>

            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import { getPageById, submitExam } from "../../api/page";
import { mapState } from 'vuex';

export default {
    name: "page",
    data() {
        var radioSelect = {};
        var checkBoxSelect = {};
        var judgList = {};
        // ？？清空
        for (let i = 1; i < 10; i++) {
            radioSelect[['radio-' + i]] = '';
            checkBoxSelect[['checkbox-' + i]] = [];
            judgList[['judg-' + i]] = '';
        }
        return {
            /*试卷id*/
            pageId: 0,
            loading: true,

            radioSelect,
            checkBoxSelect,
            judgList,
            // 题目信息
            answerQuestion: [],
            judgementQuestion: [],
            multipleQuestion: [],
            questionType: "",
            singleQuestion: [],
            title: '',
        }
    },
    created() {
        // 获取路由传来的试卷id
        this.pageId = this.$route.params.id;
        // 渲染题目
        this.getPageByIdHandler();
    },
    computed: {
        ...mapState(['userInfo']),
    },

    methods: {
        // 退出/返回上一个窗口
        onClickLeft() {


            this.$dialog.confirm({
                title: '标题',
                message: '是否离开试卷，考试作废！！！',
            })
                .then(() => {
                    this.$router.back();
                })
        },
        // 获取题目
        async getPageByIdHandler() {
            console.log(this.$route);
            this.loading = true;
            // console.log(this.pageId);
            // 获取试卷
            let info = await getPageById(this.pageId);
            this.loading = false;

            // let rs = info;
            let rs = info.data.data.questionList;
            console.log(rs);
            if(info.data.statusCode==200){

            }else{
                this.$notify({ type: 'danger ', message:info.data.statusCode+ '-获取题目失败请联系技术人员', duration: 1500 });
            }
            this.singleQuestion = rs.singleQuestion;
            this.multipleQuestion = rs.multipleQuestion;
            this.judgementQuestion = rs.judgementQuestion;

            this.answerQuestion = rs.answerQuestion;

            this.questionType = rs.questionType;
            this.title = rs.title;

        },
        // 提交
        async onSubmit(values) {
            this.$dialog.confirm({
                title: '标题',
                message: '是否提交试卷，一旦提交无法撤销！！！',
            })
                .then(async () => {

                    let answer = {};

                    for (var attr in values) {

                        answer[attr.split('-')[1]] = values[attr];

                    }

                    var answerInfos = {
                        "title": this.title,
                        "answer": answer,
                        "userName": this.userInfo.name,
                        "userId": this.userInfo._id,
                        "questionId": this.pageId,
                        "answerTime": "00：00：00",
                        "questionType": this.questionType
                    };

                    let info = await submitExam(answerInfos);

                    if (info.data.statusCode == 200) {
                        this.$notify({ type: 'success ', message: '试卷已提交', duration: 500 });
                        this.$router.push('/show/myexams');
                    } else {
                        this.$notify('系统繁忙！');
                    }

                })
                .catch(() => {
                    console.log('cancel');
                    console.log(values);
                });


        },
        // 验证
        validatorDanxuan(value) {
            var allowItems = ['A', 'B', 'C', 'D'];
            return allowItems.includes(value);
        },
        validatorCheckBox(value) {
            return value.length > 0;
        },
        validatorJudg(value) {
            var allowItems = ['A', 'B'];
            return allowItems.includes(value);
        },

        validatorAnswer(value) {
            return value.trim().length > 0;
        },

    }
}
</script>

<style scoped lang="less">
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;

    span {
        width: 100px;
        height: 100px;
    }
}

.block {
    width: 120px;
    height: 120px;
    background-color: #fff;
}

.page {
    margin-bottom: 70px;

    .pannel {
        h2> {
            font-size: 0.48rem;
            color: #000;
            background-color: #fff;
            padding: 0.2rem 0;
            padding-left: 0.2rem;
            font-weight: 700;
            border-bottom: 1px solid #e4e4e4;

        }
    }

    .title {
        background-color: #fff;
        margin: 0.3rem 0;
        font-size: 0.48rem;
        color: #000;
        padding: 0.1rem 0;
        padding-left: 0.2rem;
        line-height: 1.5;
    }

    .card {
        margin-bottom: 0.2rem;

        .card-hd {
            padding: 0.4rem;
            background-color: #fff;
            font-size: 0.38rem;
            line-height: 1.4;
            color: #000;
            font-weight: 500;
            padding-bottom: 0.2rem;

        }

        .van-radio-group,
        .van-checkbox-group {
            .item {
                margin: 0.2rem 0;
            }
        }
    }
}
</style>
